$(document).ready(function(){
    loadBooks();
});

function loadBooks(){
    $.getJSON("./cartBooks").done(function(carts){
        console.log(carts);
        updateBooksView(carts);
    }).fail(function(e){
        console.log(e);
    });
}

function updateBooksView(carts){
    var totalPrice=0;
    for(var cart of carts){
        var tr=$("<tr></tr>");
        var td=$("<td class='product-thumbnail'></td>");
        td.append("<img src='images/upload/"+cart.book.picture+"'alt='Image' class='img-fluid'>");
        tr.append(td);
        var td=$("<td class='product-name'></td>");
        td.append("<h2 class='h5 text-black'>"+cart.book.name+"</h2>");
        tr.append(td);
        tr.append("<td>￥"+cart.book.price+"</td>");
        tr.append("<td><div class='input-group mb-3 d-flex align-items-center quantity-container' style='max-width: 120px;'>"
        +"<div class='input-group-prepend'><a class='btn btn-outline-black decrease' href='./shoppingServlet?method=decrease&bookId="+cart.book.id+"'>&minus;</a></div>"
        +"<input type='text' class='form-control text-center quantity-amount' value="+cart.num+" placeholder='' aria-label='Example text with button addon' aria-describedby='button-addon1'>"
        +"<div class='input-group-append'><a class='btn btn-outline-black increase' href='./shoppingServlet?method=increase&bookId="+cart.book.id+"'>&plus;</a></div></div></td>");
        tr.append("<td>￥"+(cart.book.price*cart.num).toFixed(2)+"</td>");
        tr.append("<td><a href='./shoppingServlet?method=delete&bookId="+cart.book.id+"' class='btn btn-black btn-sm'>X</a></td>");
        $("#cartView").append(tr);
        totalPrice+=cart.book.price*cart.num;
    }
    $("#totalPrice").append(totalPrice.toFixed(2));
}

